<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壁纸APP - 设计原型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            min-height: 100vh;
        }

        /* 顶部搜索栏 */
        .search-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: #fff;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            z-index: 100;
            transition: transform 0.3s ease;
        }

        .search-input {
            flex: 1;
            height: 36px;
            background: #f5f5f5;
            border: none;
            border-radius: 18px;
            padding: 0 16px;
            font-size: 14px;
        }
        
        /* 正能量语录样式 */
        .positive-quote {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: 500;
            color: #333;
            transition: opacity 0.5s ease;
        }

        /* 轮播图样式 */
        .carousel-container {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            margin: 16px 16px 0;
        }

        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: 180px;
        }

        .carousel-item {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
            padding: 16px;
            font-size: 16px;
            font-weight: 500;
        }

        .carousel-dots {
            position: absolute;
            bottom: 10px;
            right: 16px;
            display: flex;
            gap: 6px;
        }

        .carousel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            transition: all 0.3s ease;
        }

        .carousel-dot.active {
            background: white;
            transform: scale(1.2);
        }

        /* 分类快捷入口 */
        .category-shortcuts {
            display: flex;
            overflow-x: auto;
            padding: 16px;
            gap: 12px;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        .category-shortcuts::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        .category-shortcut {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 70px;
        }

        .category-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: white;
            font-size: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .category-name {
            font-size: 12px;
            color: #666;
            text-align: center;
        }

        /* 推荐专题 */
        .featured-section {
            margin: 16px;
            background: white;
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title i {
            color: #FFD700;
            font-size: 16px;
        }

        .section-more {
            font-size: 14px;
            color: #007AFF;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .section-more:hover {
            background: rgba(0,122,255,0.1);
        }

        .featured-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .featured-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 16/9;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .featured-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .featured-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .featured-item:hover img {
            transform: scale(1.05);
        }

        .featured-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
        }

        .featured-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .featured-desc {
            font-size: 12px;
            opacity: 0.9;
        }

        .featured-tag {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .featured-tag i {
            font-size: 10px;
        }

        /* 壁纸网格 */
        .wallpaper-grid {
            padding: 0 16px 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            transition: margin-top 0.3s ease;
            padding-bottom: 60px; /* 为底部导航留出空间 */
        }

        .wallpaper-item {
            position: relative;
            aspect-ratio: 9/16;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
            background: #fff;
        }
        
        .wallpaper-item:active {
            transform: scale(0.98);
        }

        .wallpaper-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .wallpaper-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 8px;
            color: white;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .wallpaper-item:hover .wallpaper-info {
            opacity: 1;
        }
        
        .wallpaper-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
        }
        
        .wallpaper-stat {
            display: flex;
            align-items: center;
            font-size: 10px;
        }
        
        /* 下拉刷新样式 */
        .pull-refresh {
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #666;
            font-size: 14px;
            transform: translateY(-60px);
            transition: transform 0.3s ease;
        }
        
        .pull-refresh.active {
            transform: translateY(0);
        }
        
        .refresh-icon {
            width: 20px;
            height: 20px;
            border: 2px solid #007AFF;
            border-radius: 50%;
            border-top-color: transparent;
            margin-right: 8px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 49px;
            background: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
        }

        .nav-item.active {
            color: #007AFF;
        }

        /* 导航项样式 */
        .nav-item a {
            text-decoration: none;
            color: inherit;
        }
    </style>
</head>
<body>
    <!-- 顶部正能量语录 -->
    <div class="search-bar">
        <div class="search-input positive-quote" id="positive-quote">每一天都是新的开始，充满无限可能</div>
    </div>

    <!-- 下拉刷新指示器 -->
    <div class="pull-refresh" id="pull-refresh">
        <div class="refresh-icon"></div>
        <span>下拉刷新</span>
    </div>

    <!-- 轮播图 -->
    <div class="carousel-container">
        <div class="carousel" id="carousel">
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=1" alt="精选壁纸">
                <div class="carousel-caption">精选高清壁纸</div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=2" alt="自然风景">
                <div class="carousel-caption">自然风景系列</div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?random=3" alt="艺术创作">
                <div class="carousel-caption">艺术创作集</div>
            </div>
        </div>
        <div class="carousel-dots">
            <div class="carousel-dot active"></div>
            <div class="carousel-dot"></div>
            <div class="carousel-dot"></div>
        </div>
    </div>

    <!-- 分类快捷入口 -->
    <div class="category-shortcuts">
        <div class="category-shortcut">
            <div class="category-icon" style="background: linear-gradient(135deg, #FF9A9E, #FAD0C4)">🏞️</div>
            <div class="category-name">风景</div>
        </div>
        <div class="category-shortcut">
            <div class="category-icon" style="background: linear-gradient(135deg, #A6C0FE, #F68084)">🌃</div>
            <div class="category-name">城市</div>
        </div>
        <div class="category-shortcut">
            <div class="category-icon" style="background: linear-gradient(135deg, #FCCB90, #D57EEB)">🌌</div>
            <div class="category-name">星空</div>
        </div>
        <div class="category-shortcut">
            <div class="category-icon" style="background: linear-gradient(135deg, #E0C3FC, #8EC5FC)">🎨</div>
            <div class="category-name">艺术</div>
        </div>
        <div class="category-shortcut">
            <div class="category-icon" style="background: linear-gradient(135deg, #F093FB, #F5576C)">🌸</div>
            <div class="category-name">花卉</div>
        </div>
        <div class="category-shortcut">
            <div class="category-icon" style="background: linear-gradient(135deg, #5EE7DF, #B490CA)">🎮</div>
            <div class="category-name">游戏</div>
        </div>
    </div>

    <!-- 推荐专题 -->
    <div class="featured-section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-star"></i>
                精选专题
            </div>
            <a href="featured.html" class="section-more">
                查看更多
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
        <div class="featured-grid">
            <div class="featured-item">
                <img src="https://picsum.photos/600/400?random=10" alt="夏日清凉">
                <div class="featured-tag">
                    <i class="fas fa-fire"></i>
                    热门
                </div>
                <div class="featured-info">
                    <div class="featured-name">夏日清凉壁纸</div>
                    <div class="featured-desc">精选20张清爽夏日壁纸</div>
                </div>
            </div>
            <div class="featured-item">
                <img src="https://picsum.photos/600/400?random=11" alt="星空系列">
                <div class="featured-tag">
                    <i class="fas fa-star"></i>
                    精选
                </div>
                <div class="featured-info">
                    <div class="featured-name">梦幻星空系列</div>
                    <div class="featured-desc">15张唯美星空壁纸</div>
                </div>
            </div>
            <div class="featured-item">
                <img src="https://picsum.photos/600/400?random=12" alt="城市夜景">
                <div class="featured-tag">
                    <i class="fas fa-clock"></i>
                    最新
                </div>
                <div class="featured-info">
                    <div class="featured-name">城市夜景集</div>
                    <div class="featured-desc">18张城市夜景壁纸</div>
                </div>
            </div>
            <div class="featured-item">
                <img src="https://picsum.photos/600/400?random=13" alt="自然风光">
                <div class="featured-tag">
                    <i class="fas fa-heart"></i>
                    推荐
                </div>
                <div class="featured-info">
                    <div class="featured-name">自然风光精选</div>
                    <div class="featured-desc">25张自然风光壁纸</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 壁纸网格 -->
    <div class="wallpaper-grid" id="wallpaper-grid">
        <!-- 初始壁纸将由JavaScript动态加载 -->
    </div>
    
    <!-- 加载指示器 -->
    <div id="loading" style="display: none; text-align: center; padding: 20px; color: #666;">
        正在加载更多壁纸...
    </div>

    <!-- 用户中心已移至profile.html -->

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" id="home-tab">
            <span>首页</span>
        </div>
        <a href="category.html" class="nav-item" id="category-tab">
            <span>分类</span>
        </a>
        <a href="video.html" class="nav-item" id="video-tab">
            <span>视频</span>
        </a>
        <a href="my.html" class="nav-item" id="profile-tab">
            <span>我的</span>
        </a>
    </div>

    <script>
        // 底部导航切换
        const navItems = document.querySelectorAll('.nav-item');
        const wallpaperGrid = document.getElementById('wallpaper-grid');
        const homeTab = document.getElementById('home-tab');
        const loadingIndicator = document.getElementById('loading');
        const pullRefresh = document.getElementById('pull-refresh');
        const carousel = document.getElementById('carousel');
        const carouselDots = document.querySelectorAll('.carousel-dot');

        // 设置当前页面导航项为激活状态
        homeTab.classList.add('active');
        
        // 壁纸数据 - 使用随机图片
        let page = 1;
        let isLoading = false;
        const itemsPerPage = 10;
        let startY = 0;
        let currentCarouselIndex = 0;
        
        // 正能量语录数据
        const positiveQuotes = [
            "每一天都是新的开始，充满无限可能",
            "微笑面对生活，积极拥抱未来",
            "坚持不懈，成功就在不远处",
            "态度决定高度，行动创造未来",
            "生活不是等待风暴过去，而是学会在雨中跳舞",
            "做最好的自己，成就最美的人生",
            "心有多大，舞台就有多大",
            "不要为失败找借口，要为成功找方法",
            "今天的付出，明天的收获",
            "勇敢追逐梦想，不负韶华时光",
            "相信自己，你比想象中更加强大",
            "成功源于行动，行动源于决心",
            "每一次尝试都是成长的机会",
            "坚持梦想，不负青春韶华",
            "人生没有彩排，每一天都是现场直播",
            "努力不一定成功，但放弃一定失败",
            "生命因拼搏而精彩，生活因奋斗而美丽",
            "没有人能够阻挡一个意志坚定的人",
            "成功的路上并不拥挤，因为坚持的人不多",
            "把每一次挫折当作成长的养分"
        ];
        let currentQuoteIndex = 0;
        
        // 初始加载壁纸
        loadWallpapers();
        
        // 轮播图自动切换
        setInterval(() => {
            currentCarouselIndex = (currentCarouselIndex + 1) % 3;
            updateCarousel();
        }, 5000);
        
        // 正能量语录自动切换
        function updateQuote() {
            const quoteElement = document.getElementById('positive-quote');
            currentQuoteIndex = (currentQuoteIndex + 1) % positiveQuotes.length;
            
            // 添加淡出效果
            quoteElement.style.opacity = 0;
            
            setTimeout(() => {
                quoteElement.textContent = positiveQuotes[currentQuoteIndex];
                // 添加淡入效果
                quoteElement.style.opacity = 1;
            }, 500);
        }
        
        // 初始显示第一条语录
        document.getElementById('positive-quote').textContent = positiveQuotes[currentQuoteIndex];
        
        // 每6秒切换一次语录，给用户更多阅读时间
        setInterval(updateQuote, 6000);
        
        // 更新轮播图位置和指示器
        function updateCarousel() {
            carousel.style.transform = `translateX(-${currentCarouselIndex * 100}%)`;
            carouselDots.forEach((dot, index) => {
                if (index === currentCarouselIndex) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }
        
        // 点击轮播指示器切换
        carouselDots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentCarouselIndex = index;
                updateCarousel();
            });
        });
        
        // 下拉刷新功能
        document.addEventListener('touchstart', (e) => {
            startY = e.touches[0].clientY;
        }, { passive: true });
        
        document.addEventListener('touchmove', (e) => {
            const currentY = e.touches[0].clientY;
            const diff = currentY - startY;
            
            // 只有在页面顶部才能下拉刷新
            if (window.scrollY === 0 && diff > 50) {
                pullRefresh.classList.add('active');
                e.preventDefault();
            }
        }, { passive: false });
        
        document.addEventListener('touchend', () => {
            if (pullRefresh.classList.contains('active')) {
                // 执行刷新操作
                refreshContent();
            }
        });
        
        function refreshContent() {
            // 显示刷新动画
            pullRefresh.querySelector('span').textContent = '正在刷新...';
            
            // 模拟刷新操作
            setTimeout(() => {
                // 清空现有壁纸
                wallpaperGrid.innerHTML = '';
                page = 1;
                
                // 重新加载壁纸
                loadWallpapers();
                
                // 重置刷新状态
                pullRefresh.classList.remove('active');
                pullRefresh.querySelector('span').textContent = '下拉刷新';
            }, 1500);
        }
        
        // 监听滚动事件，实现无限加载
        window.addEventListener('scroll', () => {
            // 检查是否滚动到底部
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
                if (!isLoading) {
                    loadWallpapers();
                }
            }
        });
        
        // 加载壁纸函数
        function loadWallpapers() {
            isLoading = true;
            loadingIndicator.style.display = 'block';
            
            // 模拟网络请求延迟
            setTimeout(() => {
                // 生成新的壁纸项
                for (let i = 0; i < itemsPerPage; i++) {
                    const randomId = Math.floor(Math.random() * 1000) + page * 100 + i;
                    const randomHeight = Math.floor(Math.random() * 100) + 400;
                    const likes = Math.floor(Math.random() * 1000);
                    const downloads = Math.floor(Math.random() * 500);
                    
                    const wallpaperItem = document.createElement('div');
                    wallpaperItem.className = 'wallpaper-item';
                    
                    const img = document.createElement('img');
                    img.src = `https://picsum.photos/300/${randomHeight}?random=${randomId}`;
                    img.alt = '壁纸';
                    img.loading = 'lazy'; // 使用浏览器的懒加载功能
                    
                    const wallpaperInfo = document.createElement('div');
                    wallpaperInfo.className = 'wallpaper-info';
                    
                    const title = document.createElement('div');
                    title.textContent = `壁纸 #${randomId}`;
                    
                    const stats = document.createElement('div');
                    stats.className = 'wallpaper-stats';
                    
                    const likeStat = document.createElement('div');
                    likeStat.className = 'wallpaper-stat';
                    likeStat.innerHTML = `❤️ ${likes}`;
                    
                    const downloadStat = document.createElement('div');
                    downloadStat.className = 'wallpaper-stat';
                    downloadStat.innerHTML = `⬇️ ${downloads}`;
                    
                    stats.appendChild(likeStat);
                    stats.appendChild(downloadStat);
                    
                    wallpaperInfo.appendChild(title);
                    wallpaperInfo.appendChild(stats);
                    
                    wallpaperItem.appendChild(img);
                    wallpaperItem.appendChild(wallpaperInfo);
                    wallpaperGrid.appendChild(wallpaperItem);
                    
                    // 添加点击事件（可以在这里添加查看大图功能）
                    wallpaperItem.addEventListener('click', () => {
                        // 这里可以添加查看大图的功能
                        console.log('查看壁纸:', img.src);
                        // 简单的点赞效果
                        const currentLikes = parseInt(likeStat.textContent.split(' ')[1]);
                        likeStat.innerHTML = `❤️ ${currentLikes + 1}`;
                        likeStat.style.color = '#ff5252';
                    });
                }
                
                page++;
                isLoading = false;
                loadingIndicator.style.display = 'none';
            }, 800); // 模拟加载延迟
        }

    </script>
</body>
</html>